<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>在线考试系统控制台-考试管理-查看试题</title>
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" />
    <link th:href="@{https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{/css/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/css/manage/manage-app.css}" />

    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/js/manage/manage-app.js}"></script>
    <script type="text/javascript" th:src="@{/js/manage/manage-editContestProblem.js}"></script>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img style="width: 32px;height: 32px;" th:src="@{/img/manage-logo.png}" /></a>
            <a class="navbar-brand" href="#">在线考试系统控制台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <img class="img-circle" style="width: 32px;height: 32px;" th:src="@{'/upload/images/'+${current_account.avatarImgUrl}}" />&nbsp;&nbsp;<span th:text="${current_account.name}"></span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:void(0);">修改密码</a></li>
                        <li><a id="logout">退出系统</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#"><i class="fa fa-tv"></i>&nbsp;考试管理 <span class="sr-only">(current)</span></a></li>
                <li><a th:href="@{/manage/question/list}"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;题目管理</a></li>
                <li><a th:href="@{/manage/subject/list}"><span class="glyphicon glyphicon-book"></span>&nbsp;课程管理</a></li>
                <li><a th:href="@{/manage/result/contest/list}"><span class="glyphicon glyphicon-signal"></span>&nbsp;成绩管理</a></li>
                <li><a th:href="@{/manage/account/list}"><span class="glyphicon glyphicon-user"></span>&nbsp;用户管理</a></li>
                <li><a th:href="@{/manage/post/list}"><i class="fa fa-paper-plane"></i>&nbsp;帖子管理</a></li>
                <li><a th:href="@{/manage/comment/list}"><i class="fa fa-commenting-o"></i>&nbsp;评论管理</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!--<h1 class="page-header">考试管理</h1>-->
            <div class="page-header">
                <h1><a th:href="@{/manage/contest/list}">考试管理</a>&nbsp;&nbsp;<small th:text="${data['contest'].title} + '&nbsp;&nbsp;总分: ' + ${data['contest'].totalScore}"></small></h1>
            </div>
            <div class="row" style="margin-bottom: 5px;">
                <div class="col-md-10">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-success" id="addQuestionBtn"><i class="fa fa-plus"></i>添加题目</button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>题目</th>
                        <th>题型</th>
                        <th>难度</th>
                        <th>分值</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:if="${data['questionsSize'] == 0}">
                        <td colspan="9" style="padding: 0px;">
                            <div class="alert alert-warning" role="alert">
                                <i class="fa fa-exclamation-circle"></i>当前还没有题目呢！_(:зゝ∠)_
                            </div>
                        </td>
                    </tr>
                    <tr th:each="item,itemStats : ${data['questions']}">
                        <td th:text="${itemStats.index+1}"></td>
                        <td th:text="${item.title}" width="660px"></td>
                        <td th:if="${item.questionType == 0}">单选</td>
                        <td th:if="${item.questionType == 1}">多选</td>
                        <td th:if="${item.questionType == 2}">问答</td>
                        <td th:if="${item.questionType == 3}">编程</td>
                        <td th:if="${item.difficulty == 1}">
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                        </td>
                        <td th:if="${item.difficulty == 2}">
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                        </td>
                        <td th:if="${item.difficulty == 3}">
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                        </td>
                        <td th:if="${item.difficulty == 4}">
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star-empty"></i>
                        </td>
                        <td th:if="${item.difficulty == 5}">
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                            <i class="glyphicon glyphicon-star"></i>
                        </td>
                        <td th:text="${item.score}"></td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs" th:onclick="'manageEditContestProblemPage.updateQuestionModalAction('+${itemStats.index}+')'"><i class="fa fa-edit"></i>编辑</button>
                            <button type="button" class="btn btn-danger btn-xs" th:onclick="'manageEditContestProblemPage.deleteQuestionAction('+${item.id}+')'"><i class="fa fa-trash"></i>删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--新增窗口-->
<div id="addQuestionModal" class="bootbox modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增题目</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" onsubmit="return false;">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目标题</label>
                        <div class="col-sm-8">
                            <input id="questionTitle" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目内容</label>
                        <div class="col-sm-8">
                            <textarea  id="questionContent" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目类型</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="questionType">
                                <option th:value="0">单选</option>
                                <option th:value="1">多选</option>
                                <option th:value="2">问答</option>
                                <option th:value="3">编程</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">A选项</label>
                        <div class="col-sm-8">
                            <input id="optionA" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">B选项</label>
                        <div class="col-sm-8">
                            <input id="optionB" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">C选项</label>
                        <div class="col-sm-8">
                            <input id="optionC" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">D选项</label>
                        <div class="col-sm-8">
                            <input id="optionD" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目答案</label>
                        <div class="col-sm-8">
                            <textarea  id="questionAnswer" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">答案解析</label>
                        <div class="col-sm-8">
                            <textarea  id="questionParse" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目难度</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="questionDifficulty">
                                <option th:value="1">
                                    一星难度
                                </option>
                                <option th:value="2">
                                    二星难度
                                </option>
                                <option th:value="3">
                                    三星难度
                                </option>
                                <option th:value="4">
                                    四星难度
                                </option>
                                <option th:value="5">
                                    五星难度
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目分值</label>
                        <div class="col-sm-8">
                            <input id="questionScore" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button data-bb-handler="confirm" type="button" id="confirmAddQuestionBtn" class="btn btn-success radius">
                    <span><i class="icon-ok"></i></span> 确定
                </button>
                <button data-bb-handler="cancel" type="button" id="cancelAddQuestionBtn" class="btn btn-danger radius">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑窗口 -->
<div id="updateQuestionModal" class="bootbox modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑题目</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" onsubmit="return false;">
                    <input type="hidden" id="updateQuestionIndex" />
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目标题</label>
                        <div class="col-sm-8">
                            <input id="updateQuestionTitle" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目内容</label>
                        <div class="col-sm-8">
                            <textarea  id="updateQuestionContent" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目类型</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="updateQuestionType">
                                <option th:value="0">单选</option>
                                <option th:value="1">多选</option>
                                <option th:value="2">问答</option>
                                <option th:value="3">编程</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">A选项</label>
                        <div class="col-sm-8">
                            <input id="updateOptionA" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">B选项</label>
                        <div class="col-sm-8">
                            <input id="updateOptionB" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">C选项</label>
                        <div class="col-sm-8">
                            <input id="updateOptionC" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">D选项</label>
                        <div class="col-sm-8">
                            <input id="updateOptionD" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目答案</label>
                        <div class="col-sm-8">
                            <textarea  id="updateQuestionAnswer" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">答案解析</label>
                        <div class="col-sm-8">
                            <textarea  id="updateQuestionParse" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目难度</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="updateQuestionDifficulty">
                                <option th:value="1">
                                    一星难度
                                </option>
                                <option th:value="2">
                                    二星难度
                                </option>
                                <option th:value="3">
                                    三星难度
                                </option>
                                <option th:value="4">
                                    四星难度
                                </option>
                                <option th:value="5">
                                    五星难度
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">题目分值</label>
                        <div class="col-sm-8">
                            <input id="updateQuestionScore" type="text" class="form-control" placeholder="" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button data-bb-handler="confirm" type="button" id="confirmUpdateQuestionBtn" class="btn btn-success radius">
                    <span><i class="icon-ok"></i></span> 保存
                </button>
                <button data-bb-handler="cancel" type="button" id="cancelUpdateQuestionBtn" class="btn btn-danger radius">取消</button>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    var contest = /*[[${data['contest']}]]*/;
    var questions = /*[[${data['questions']}]]*/;
    var contextPath = /*[[${#httpServletRequest.getContextPath()}]]*/;

    $(function(){
        app.init(contextPath);
        manageEditContestProblemPage.init(contest, questions);
    });
    /*]]>*/
</script>
</body>
</html>

